<template>
  <el-card class="global-card">
    <template #header>
      <div class="card-header">
        <span>积分明细</span>
      </div>
    </template>
    <AsideSearch
      :is-loading="loadOpts.refresh"
      @on-search="handleClickSearch"
    />
    <el-table
      :data="tableData"
      style="width: 100%; margin: 20px 0"
      border
      highlight-current-row
    >
      <el-table-column label="渠道商" min-width="256">
        <template #default="scope">
          <ProfilePanel
            v-if="scope.row.user"
            :avatar="scope.row.user.avatar"
            :nickname="scope.row.user.nickname"
            :remark="scope.row.user.remark"
            isNav
          />
        </template>
      </el-table-column>
      <el-table-column label="收益类型" min-width="96">
        <template #default="scope">
          <PipeTags type="income-type" :state="scope.row.type" />
        </template>
      </el-table-column>
      <el-table-column label="结算状态" min-width="96">
        <template #default="scope">
          <PipeTags type="income" :state="scope.row.state" />
        </template>
      </el-table-column>
      <el-table-column label="积分" min-width="128">
        <template #default="scope">
          <PipeMoney :type="scope.row.type" :money="scope.row.money" showSign />
        </template>
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        min-width="256"
      ></el-table-column>
      <el-table-column label="创建时间" min-width="192">
        <template #default="scope">
          <PipeDatetime :value="scope.row.createTime" />
        </template>
      </el-table-column>
      <el-table-column label="审核时间" min-width="192">
        <template #default="scope">
          <PipeDatetime :value="scope.row.updateTime" />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:currentPage="pageOpts.page.value"
      :page-sizes="pageOpts.sizes.value"
      :page-size="pageOpts.size.value"
      :layout="pageOpts.layout.value"
      :total="pageOpts.total.value"
      small
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';

import { getIncomeList } from '@/apis/user-income';
import { InitLoadOpts, InitPageOpts } from '@/utils/common';

import AsideSearch from './aside-search.vue';

// 加载状态
const loadOpts = reactive(InitLoadOpts());

// 查询数据（默认执行一次）
let searchData: any;
const handleClickSearch = (data: any) => {
  searchData = data;
  requestData();
};

// 列表数据
let tableData = ref<API.userIncome.TableData[]>([]);

// 分页数据
const pageOpts = InitPageOpts({
  page: 1,
  size: 10
});

// 切换显示条数
const handleSizeChange = (size: number) => {
  pageOpts.size.value = size;
  pageOpts.page.value = 1;
  requestData();
};

// 切换页数
const handleCurrentChange = (page: number) => {
  pageOpts.page.value = page;
  requestData();
};

// 获取分页数据
const requestData = () => {
  const dataOpt = {
    page: pageOpts.page.value,
    limit: pageOpts.size.value,

    ...searchData
  };

  // 开始加载
  loadOpts.refresh = true;

  getIncomeList(dataOpt)
    .then((res) => {
      tableData.value = res.data.data || [];
      pageOpts.total.value = res.data.total;

      // 加载结束
      loadOpts.refresh = false;
    })
    .catch((err) => {
      console.log('table list error', err);
      // 加载结束
      loadOpts.refresh = false;
    });
};
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
